/**
* 功能描述: 基础圆形进度条demo
* @author 崔孝楠
* @date 2022/9/21 18:11
* @version 1.0
*/
<template>
  <div class="yw-progress yw-progress-circle yw-progress-show-info" >
    <div class="yw-progress-inner">
      <!-- svg宽高为 2*r + stroke-width
           r 半径 cx,cy原点坐标, stroke-width 进度条宽度
           stroke-dasharray设置为周长 3.1415926*2r
           百分比计算 stroke-dashoffset = stroke-dasharray - stroke-dasharray*百分数
           transform旋转 设置起点位置 -->
      <svg width="148px" height="148px" style="transform: rotate(-90deg)" >
        <circle r="70" cy="75" cx="75" stroke-width="8" class="yw-progress-circle-trail" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
        <circle r="70" cy="75" cx="75" stroke-width="8" class="yw-progress-circle-path" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="110px"  stroke-dasharray="440px" />
      </svg>
      <span class="yw-progress-text" title="75%">75%</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>

</style>
